<template>
  <a-card>
    <div class="flex">
      <p class="info">全年还款表</p>
      <p class="ml-10 mt-2">单位：NZD</p>
      <p class="ml-4 mt-2">年度：{{ new Date().getFullYear() }}</p>
    </div>
    <p>退出日期：<a-range-picker v-model="dateRange" @change="getData((page = 1))" /></p>
    <div class="flex justify-between">
      <div>预计还款总额：{{ minMoney(allRepay) }}</div>
      <div>未付汇款总额：{{ minMoney(noLoanAmount) }}</div>
      <div>现金流入流出：{{ minMoney(cash) }}</div>
    </div>
    <br />
    <a-table rowKey="id" :columns="columns" :data-source="data">
      <span slot="repay" slot-scope="repay">{{ minMoney(repay) }}</span>
      <span slot="exitTime" slot-scope="exitTime">{{ humanizeDate(exitTime) }}</span>
    </a-table>
  </a-card>
</template>
<script>
import { getRepayment } from '@/api/common'
import moment from 'moment'
export default {
  name: 'Repay',
  components: {},
  props: [''],
  data() {
    return {
      dateRange: [null, null],
      columns: [
        {
          title: '项目编号',
          dataIndex: 'projectNum',
          key: 'projectNum'
        },
        {
          title: '项目名称',
          dataIndex: 'addr',
          key: 'addr'
        },
        {
          title: '货币类型',
          dataIndex: 'currency',
          key: 'currency'
        },
        {
          title: '还款金额',
          dataIndex: 'repay',
          key: 'repay',
          scopedSlots: { customRender: 'repay' }
        },
        {
          title: '退出日期',
          dataIndex: 'exitTime',
          key: 'exitTime',
          scopedSlots: { customRender: 'exitTime' }
        }
      ],
      data: [],
      allRepay: 0,
      noLoanAmount: 0,
      cash: 0,
      pagination: {
        total: 1,
        pageSize: 5,
        onChange: this.getData
      }
    }
  },
  watch: {},
  computed: {},
  methods: {
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    async getData(page = 1) {
      const form = {
        page,
        limit: this.pagination.pageSize
      }
      if (this.dateRange[0]) {
        form.startTime = Number(this.dateRange[0].startOf('day').format('X'))
        form.endTime = Number(this.dateRange[1].startOf('day').format('X'))
      }
      const res = await getRepayment(form)
      // console.log(res)
      this.pagination.total = res.result.data.total
      this.allRepay = res.result.data.allRepay
      this.noLoanAmount = res.result.data.noLoanAmount
      this.cash = res.result.data.cash
      this.data = res.result.data.list
    }
  },
  created() {},
  mounted() {
    this.getData()
  }
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 20px;
}
</style>
